<template>
  <div id="main"></div>
</template>
<script setup name="echarsTable">
import * as echarts from 'echarts';
const props = defineProps({
  echartsListData: {
    type: Object,
    required: true
  },
  titleName: {
    type: String,
    required: true,
  }
})
watch(() => props.echartsListData, () => {
  if(JSON.stringify(props.echartsListData) != '{}') {
    initEchars();
  }
}, { immediate: true, deep: true })
const resultChart = ref(null);
function initEchars() {
  resultChart.value = echarts.init(document.getElementById('main'));
  var option;
  option = {
    title: {
      text: props.titleName
    },
    grid: {
      left: '20%'
    },
    xAxis: {
      type: 'category',
      boundaryGap:true,
      data: ['基本\n完好','轻微\n破坏','中等\n破坏','严重\n破坏','毁坏']
    },
    yAxis: {
      type: 'value',
      name: '(面积/万平方米)',
      axisLabel: {                   
        formatter: function (value, index) {           
          return value.toFixed(2);      
        }                
      }
    },
    series: [
      {
        type: 'bar',
        smooth: true,
        label: {
          show: true,
          position: 'inside'
        },
        data: [
          {value: (props.echartsListData.basicArea / 10000).toFixed(2),itemStyle: {color: 'rgba(250,204,204)'}},
          {value: (props.echartsListData.slightArea / 10000).toFixed(2),itemStyle: {color: 'rgba(244,179,200)'}},
          {value: (props.echartsListData.midArea / 10000).toFixed(2),itemStyle: {color: 'rgba(240,110,151)'}},
          {value: (props.echartsListData.seriousArea / 10000).toFixed(2),itemStyle: {color: 'rgba(253,8,124)'}},
          {value: (props.echartsListData.destroyArea / 10000).toFixed(2),itemStyle: {color: 'rgba(175,29,81)'}},
        ],
      }
    ]
  };
  option && resultChart.value.setOption(option);
}
onMounted(() => {
  // initEchars();
})
</script>
<style scoped>
  #main {
    width:350px;
    height:400px;
    background-color: #fff;
    box-shadow: 0 0 20px #0003;
    border: 1px solid #707070;
    border-radius: 4px;
  }
</style>